<template>
  <div id="app" class="app">
    <div class="box-input2" style="width: 180px">
      <el-input clearable size="mini" v-model="verification" placeholder="请输入新班级验证码"></el-input>
      <!-- @keydown.enter.native="clkBtnSearch" @clear="clkBtnSearch" -->
    </div>
    <div class="box-input2">
      <el-button size="mini" type="primary" icon="el-icon-search" @click="getClass()" >查询</el-button>
    </div>
    <div>
      <p style="width: 80%;margin: 10px auto;">查找到的班级</p>
      <el-table :data="classList" height="150" border style="width: 80%;margin: 0 auto;">
        <el-table-column prop="class_name" label="班级名称" max-width="200">
        </el-table-column>
        <el-table-column prop="teacher_name" label="讲师" max-width="200">
        </el-table-column>
        <el-table-column label="操作">
          <el-button size="mini" type="primary" @click="applyToJoin(classList[0].class_code)" >申请加入</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 100px;">
      <p style="width: 80%;margin: 10px auto;">我所在的班级</p>
      <el-table :data="userClassList" height="220" tooltip-effect="dark" border style="width: 80%;margin: 0 auto;">
        <el-table-column prop="class_name" label="班级名称" max-width="180">
        </el-table-column>
        <el-table-column prop="create_date" label="时间" max-width="180">
        </el-table-column>
        <el-table-column prop="class_state" :formatter="formatSex" label="状态" max-width="180">
        </el-table-column>
        <el-table-column label="操作">
          <span>进入</span>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import request from '@/common/utils/request';
export default {
  data() {
    return {
      verification: '',//验证码
      classList: [], //查找到的班级
      userClassList: [], //当前用户班级
    };
  },
  mounted () {
    this.huoqvbanji();
  },
  computed: {
     loginUserInfo() {
        return this.$store.state.loginUserInfo;
      },
  },
  methods: {
    formatSex: function (row, column, cellValue) {
      if (cellValue === 1){
        return '在授';
      }else if (cellValue === 0){
        return '结业';
      }
    },
    huoqvbanji(){
      let url1 = this.settings.apiUrl + "/classes/getUserInfoClasses"; //获取当前用户所在班级
      let d1 ={
        usercode: this.loginUserInfo.usercode
      };
      request.post(url1, d1).then(d1r => {
        if (d1r.code == 0) {
          console.log(d1r);
          this.userClassList = d1r.data
        }
      })
    },
    getClass(){
      if (this.verification === '') return alert('班级码不能为空')
      let url1 = this.settings.apiUrl + "/classes/searchClasses"; //查找班级    班级码：9ba350e9  429f8234
      let d1 ={
        searchKey: this.verification,
      };
      request.post(url1, d1).then(d1r => {
        if (d1r.code == 0) {
          if(d1r.data===null) return this.$alert('班级无数据')
          const arr = []
          arr.push(d1r.data)
          this.classList = arr
        }
      })
    },
    applyToJoin(class_code) {
      let url1 = this.settings.apiUrl + "/user_info/UserJoinClass"; //申请加入班级
      let d1 ={
        noid: this.loginUserInfo.noid,
        class_code,
      };
      request.post(url1, d1).then(d1r => {
        if (d1r.code == 0) {
          this.$alert('申请成功')
          this.huoqvbanji();
        }
      })
    }
  },
};
</script>

<style scoped>
.box-input2{
  display: inline-block;
  margin: 30px 0px 30px 30px;
}
</style>